在 src/components 目录下创建一个新的组件文件 DocumentViewer.vue，并添加以下内容：

<template>
  <div class="document-container" direction="vertical" alignment="flex-start">
    <div class="document-header">
      <h1>脚本规范</h1>
      <div></div>
      <p class="author">陈蔓</p>
      <p class="date">2024/08/23</p>
    </div>
    <div class="document-body">
      <p style="text-indent: 2em;">由于本框架中的JTL测试结果解析以及HTML报告为自主研发，为适配本框架的应用，Jmeter测试脚本需遵循如下规范约束：</p>
      <p style="text-indent: 4em;">1.请上传脚本压缩包(.zip/.rar/.7z)，压缩包内请勿嵌套多层目录，所有脚本与参数化文件放在同一级目录下；</p>
      <p style="text-indent: 4em;">2.JMX脚本文件名以TC开头，并与脚本中的事务控制器名一致；</p>
      <p style="text-indent: 4em;">3.脚本中保留“查看结果树”组件，并将Name改为XMLJTL，文件名保持不为空；</p>
      <p style="text-indent: 4em;">4.若需要开启资源监控，JMX脚本中需要添加两个PerMon Metrics Collector插件，并分别命名为“Res_CPU”、“Res_Memory”；</p>
      <p style="text-indent: 4em;">5.引用参数化文件时使用相对引用。</p>

      <img src="@/assets/helpfile/4.1_1.png" alt="图1" class="document-image" slot=error />
      <img src="@/assets/helpfile/4.1_2.png" alt="图2" class="document-image" slot=error />
    </div>
  </div>
</template>

<script>
export default {
  name: 'DocumentViewer'
}
</script>

<style scoped>
.document-container {

  margin: 0 auto;
  font-family: 'Arial', sans-serif;
  background-color: #ffffff;
  /* 纯白色背景 */
  padding: 20px;
  /* 为容器添加一些内边距 */
}

.document-header {
  text-align: center;
  margin-bottom: 20px;
}

.document-header h1 {
  font-size: 2em;
}

.document-header .author,
.document-header .date {
  font-size: 1em;
  color: #555;
}

.document-body {
  line-height: 1.6;
}

.document-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
}

h2 {
  margin-top: 30px;
}

ul {
  list-style-type: disc;
  margin-left: 20px;
}
</style>
